import { createApp } from "vue";
import App from "./AppView.vue";
import { Lazyload, Button } from "vant";
import loadUrl from '@/assets/place.jpg'
// 2. 引入组件样式
import 'vant/lib/index.css';
const app = createApp(App);

// 注册时可以配置额外的选项
app.use(Lazyload, {
  lazyComponent: true,
});

// 注册自定义指令
app.directive("lazy", {
  // 在元素被插入到 DOM 前调用
  beforeMount(el) {
    el.setAttribute('data-src', el.src)
    el.src = loadUrl
  },
  mounted(el) {
    const o = new IntersectionObserver((entries) => {
      if (entries[0].intersectionRatio <= 0) return;
      setTimeout(() => {
        el.src = el.getAttribute('data-src')
      }, (Math.random() * 5000));
    })


    o.observe(el)
  }
});
app.use(Button)
app.mount("#app");
